<template>
  <div class="header-container">
    <div class="header-left">
      <span @click="$store.commit('changeMenuCollapse')">
        <i :class="$store.state.menuCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        style="font-size: 25px;">
        </i>
      </span>
    </div>
    <div class="header-right">
      <el-dropdown trigger="click" size="medium">
        <span class="el-dropdown-link">
          <span>{{name}}</span>
          <img src="../../assets/logo.png" class="user" />
          <i class="el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: sessionStorage.getItem('name')
    }
  },
  methods: {
    logout() {
      sessionStorage.removeItem('token')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.el-dropdown-link{
  color: #fff;
}
</style>
